<style scoped>
    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    .layout-logo {
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 10px;
    }

    .layout-nav {
        width: 100%;
        margin: 0 auto;
        margin-left: 80px;
    }

    .nav-user {
        float: right !important;
        margin-right: 80px;
    }
</style>
<template>
    <div class="layout">
        <Layout>
            <Header :style="{position: 'fixed', width: '100%', zIndex:'1'}">
                <Menu mode="horizontal" theme="dark" active-name="home" @on-select="menuMethods">
                    <div class="layout-logo"></div>
                    <div class="layout-nav">
                        <MenuItem name="home">
                            <Icon type="ios-construct"/>
                            首页
                        </MenuItem>
                        <MenuItem v-for="item in models" :name="item.pcode">
                            <Icon :type="item.icon"/>
                            {{item.pname}}
                        </MenuItem>
                        <Submenu name="3" class="nav-user">
                            <template slot="title">
                                <Icon type="md-person"/>
                                用户信息
                            </template>
                            <MenuGroup title="信息">
                                <MenuItem name="myInfo">
                                    <Icon type="ios-contact-outline" size="18"/>
                                    个人信息
                                </MenuItem>
                                <MenuItem name="3-2">活跃分析</MenuItem>
                                <MenuItem name="3-3">时段分析</MenuItem>
                            </MenuGroup>
                            <MenuGroup title="操作">
                                <MenuItem name="lock">
                                    <Icon type="ios-lock" color="#57a3f3" size="18"/>
                                    锁定
                                </MenuItem>
                                <MenuItem name="logOut">
                                    <Icon type="md-alert" color="red" size="18"/>
                                    退出
                                </MenuItem>
                            </MenuGroup>
                        </Submenu>
                    </div>

                </Menu>
            </Header>
            <Layout>
                <Sider hide-trigger
                       :style="{background: '#515a6e',position: 'fixed', height: '100vh', left: 0, overflow: 'auto',top:'64px'}">
                    <Menu theme="dark" width="auto" ref="side_menu" :active-name="activeName"
                          :open-names="openNames">
                        <Submenu v-for="groupItem in menus" :name="groupItem.groupCode">
                            <template slot="title">
                                <Icon type="ios-navigate"></Icon>
                                <!-- 订单模块-->
                                {{groupItem.groupName}}
                            </template>
                            <MenuItem v-for="permissionItem in groupItem.permission" :name="permissionItem.pcode"
                                      :to="permissionItem.purl"> {{permissionItem.pname}}
                            </MenuItem>
                        </Submenu>
                    </Menu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px',marginTop:'7vh',marginLeft:'200px',height:'92.5vh'}">
                    <Breadcrumb :style="{margin: '10px 0'}">
                    </Breadcrumb>
                    <Content :style="{padding: '24px', background: '#fff'}">
                        <router-view></router-view>

                    </Content>
                </Layout>
            </Layout>
        </Layout>

        <Modal
                v-model="isModel"
                :title="titleModal"
                :mask-closable="false"
                @on-cancel="cancelModel"
        >
            <v-my-info ref="myInfo"></v-my-info>
        </Modal>
    </div>
</template>
<script>
    import myInfo from './MyInfo';

    export default {
        name: "Frame",
        data() {
            return {
                activeName:'',
                openNames:[],
                models: [],
                menus: [],
                isModel: false,
                titleModal: '',
                myInfoModal: false
            }
        },
        mounted: function () {
            var self = this;
            // self.gerModels();
            self.init();
        },
        methods: {
            menuMethods(name) {
                let self = this;
                switch (name) {
                    case 'myInfo':
                        self.myInfo();
                        break;
                    case 'logOut':
                        self.logOut();
                        break;
                    case 'lock':
                        self.lock();
                        break;
                    default:
                        self.getMenus(name);

                }
            },
            init() {
                var self = this;
                self.gerModels();
            },
            gerModels() {
                var self = this;
                this.$http.get('/core/queryModels').then(function (response) {
                    let data = self.common.handleData(response.data, self);
                    self.models = data;
                    self.getMenus(self.models[0].pcode);

                });

            },
            getMenus(modelName) {
                let self = this;
                this.$http.get('/core/queryMenus', {
                    params: {
                        modelName: modelName
                    }
                }).then(function (response) {
                    let data = self.common.handleData(response.data, self);
                    self.menus = data;
                    self.activeName=data[0].permission[0].pcode;
                    self.openNames=[data[0].groupCode];
                    self.$router.push({path: data[0].permission[0].purl});
                    self.openMenu(data[0].permission[0].pcode);
                });


            },
            openMenu(name) {
                this.$nextTick(() => {
                    this.$refs.side_menu.updateOpened();
                    this.$refs.side_menu.updateActiveName();

                })
            },
            myInfo() {
                let self = this;
                self.myInfoModal = true;
                self.isModel = true;

                self.titleModal = '个人信息';
                self.$refs.myInfo.getUserInfo();
            },
            logOut() {
                var self = this;
                this.$http.get('/core/logOut', {
                    params: {}
                }).then(function (response) {
                    if ("0" == response.data.code) {
                        self.common.removeStorageS("userInfo");
                        self.$router.push({path: '/'});
                    }


                });
            },
            lock() {
                let self = this;
                self.isModel = true;
            },
            cancelModel() {
                let self = this;
                self.myInfoModal = false;
            },

        },
        components: {
            'v-my-info': myInfo
        }
    }
</script>

